<template>
  <nav class="rk-alarm-tool flex-h">
    <AlarmSelect :hasSearch="true" :title="this.$t('service')" :value="service" @input="chooseService" :data="rocketAlarm.services"/>
    <AlarmSelect :hasSearch="true"  :title="this.$t('instance')" :value="service" v-model="instance" :data="rocketAlarm.instances"/>
    <AlarmSelect  :title="this.$t('rule')" :value="ruleName" @input="chooseRule"
                    :data="[{label:'ALL', key: '0'}, {label:'service_avg_duration_rule', key: '1'}, {label:'service_exception_rule', key: '2'}]"/>
    <div class="mr-10" style="padding: 3px 15px 0">
      <div class="sm grey">{{this.$t('searchKeyword')}}</div>
      <input type="text" v-model="match" class="rk-alarm-tool-input" @input="handleRefresh(1)">
    </div>
    <RkPage class="mt-15" :currentSize="20" :currentPage="pageNum" @changePage="handlePage" :total="total"/>
    <a class="rk-trace-search-btn bg-blue r" @click="handleRefresh(1)">
      <svg class="icon mr-5 vm">
          <use xlink:href="#search"></use>
      </svg>
      <span class="vm">{{ this.$t('search') }}</span>
    </a>
  </nav>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Model } from 'vue-property-decorator';
import AlarmSelect from './alarm-select.vue';
import { Action, Getter, State, Mutation } from 'vuex-class';
import { DurationTime, Option } from '@/types/global';

@Component({components: {AlarmSelect}})
export default class AlarmTool extends Vue {
  @Mutation('SET_EVENTS') private SET_EVENTS: any;
  @Action('rocketAlarm/GET_ALARM') private GET_ALARM: any;
  @State('rocketbot') private rocketbotGlobal: any;
  @State('rocketAlarm') private rocketAlarm: any;
  @Action('rocketAlarm/GET_SERVICES') private GET_SERVICES: any;
  @Action('rocketAlarm/GET_INSTANCES') private GET_INSTANCES: any;
  @Prop() private durationTime: any;
  @Prop() private total!: number;

  private pageNum: number = 1;
  private alarmScope: any = {label: 'All', key: ''};
  private match: string = '';
  private service: Option  = {label: 'ALL', key: 'ALL'};
  private instance: Option  = {label: 'ALL', key: 'ALL'};
  private ruleName: Option  = {label: 'ALL', key: '0'};
  private handlePage(pageNum: number) {
    this.handleRefresh(pageNum);
  }
  private chooseService(i: any) {
    if (this.service.key === i.key) {
        return;
    }
    this.instance = {label: 'ALL', key: 'ALL'};
    this.service = i;
    if (i.key === '') {
        return;
    }
    this.GET_INSTANCES({duration: this.durationTime, serviceId: i.label});
    }
    private chooseRule(i: any) {
        this.ruleName = i;
    }
  private handleFilter(i: any) {
    this.alarmScope = i;
    this.handleRefresh(1);
  }
  private handleRefresh(pageNum: number) {
    this.pageNum = pageNum;
    const params: any = {
      duration: this.durationTime,
      paging: {
        pageNum,
        pageSize: 20,
        needTotal: true,
      },
    };
    if (this.service.label) { params.serviceId = this.service.label; }
    if (this.instance.label) { params.serviceInstanceId = this.instance.label; }
    if (this.ruleName.label) { params.ruleName = this.ruleName.label; }
    if (this.match) { params.match = this.match; }
    this.GET_ALARM(params);
  }
  private beforeMount() {
    this.GET_SERVICES({duration: this.durationTime});
    this.SET_EVENTS([() => { this.handleRefresh(1); } ]);
    this.handleRefresh(1);
  }
}
</script>

<style lang="scss">
.rk-alarm-tool{
  border-bottom:1px solid #c1c5ca41;
  height: 52px;
  background-color: #333840;
  padding: 0 15px;
  color: #efefef;
  flex-shrink: 0;
}
.rk-alarm-tool-input {
  border-style: unset;
  outline: 0;
  padding: 2px 5px;
  border-radius: 3px;
}
</style>
